<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>电商管理系统首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #1cc88a;
            --dark-color: #5a5c69;
        }

        body {
            background-color: #f8f9fc;
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .main-container {
            max-width: 800px;
            margin-top: 5rem;
            animation: fadeIn 0.5s ease-in-out;
        }

        .header {
            text-align: center;
            margin-bottom: 2.5rem;
            color: var(--dark-color);
        }

        .header h2 {
            font-weight: 600;
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .header p {
            color: #858796;
            font-size: 1.1rem;
        }

        .feature-card {
            border: none;
            border-radius: 0.35rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1.5rem 0 rgba(58, 59, 69, 0.2);
        }

        .feature-card .card-body {
            padding: 1.5rem;
        }

        .feature-card i {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

        .feature-card h5 {
            font-weight: 600;
            color: var(--dark-color);
        }

        .feature-card p {
            color: #858796;
            margin-bottom: 1.5rem;
        }

        .feature-card .btn {
            border-radius: 2rem;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .footer {
            text-align: center;
            margin-top: 3rem;
            color: #858796;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
<div class="container main-container">
    <div class="header">
        <h2><i class="fas fa-store-alt mr-2"></i>电商管理系统</h2>
        <p>高效管理您的电商业务</p>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card feature-card">
                <div class="card-body text-center">
                    <i class="fas fa-users"></i>
                    <h5>客户管理</h5>
                    <p>管理您的客户信息，查看客户购买记录</p>
                    <a href="/customer/list" class="btn btn-primary">进入 <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card feature-card">
                <div class="card-body text-center">
                    <i class="fas fa-box-open"></i>
                    <h5>商品管理</h5>
                    <p>管理商品库存，添加新产品，设置价格</p>
                    <a href="/product/list" class="btn btn-primary">进入 <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card feature-card">
                <div class="card-body text-center">
                    <i class="fas fa-clipboard-list"></i>
                    <h5>订单管理</h5>
                    <p>查看和处理订单，跟踪订单状态</p>
                    <a href="/order/list" class="btn btn-primary">进入 <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>© 2023 电商管理系统 | 版本 1.0.0</p>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>